<template>
  <a-modal :visible="visible" :footer="false" :closable="false" wrapClassName="c-modal">
    <div class="title">
      <span>{{ title }}</span>
      <span class="iconfont iconguanbi" @click="_close"></span>
    </div>
    <div class="content" v-html="content">
      <!-- <slot name="content"></slot> -->
    </div>
    <div class="btn-div">
      <a-button :type="cancelObj.type" @click="_cancel" v-if="cancelObj.text !== false" class="cancel-btn" :loading="cancelLoading" :id="cancelObj.id ? cancelObj.id : 'modal_global_cancel'">
        {{ cancelObj.text }}
      </a-button>
      <a-button :type="okObj.type" @click="_ok" v-if="okObj.text !== false" :id="okObj.id ? okObj.id : 'modal_global_ok'">{{ okObj.text }}</a-button>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Modal, Button } from "ant-design-vue";

@Component({
  name: "ModalGlobal",
  components: {
    AModal: Modal,
    AButton: Button
  }
})
export default class ModalGlobal extends Vue {
  private visible = true;
  private title = "提示";
  // private cancelText = "取消";
  private cancelObj: any = {
    text: "取消",
    type: ""
  };
  private okObj: any = {
    text: "确定",
    type: "primary"
  };
  private okText = "确定";
  private cancelLoading = false;

  private ok = function() {
    // default
  };
  private cancel = function() {
    // default
  };

  // 后续可以优化成vnode
  private content: any = "";

  private created() {
    // undo
  }

  private _close() {
    this.visible = false;
  }

  private async _cancel() {
    this.cancelLoading = true;
    this.cancel && (await this.cancel());
    this.cancelLoading = false;
    this._close();
  }

  private async _ok() {
    this.ok && (await this.ok());
    this._close();
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
/deep/.c-modal {
  .content {
    font-size: 20px;
    padding: 32px 16px 0px 16px;
    text-align: center;
  }
  .ant-modal-content {
    border-radius: 2px;
  }
  .ant-modal-body {
    padding: 0;
  }
  .title {
    background-color: #f2f7ff;
    padding: 0px 15px;
    color: #000000;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .iconguanbi {
    color: #b5b4ba;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
  }
  .btn-div {
    .scale(padding, 30px);
    text-align: center;
  }
  .ant-btn {
    margin-right: 16px;
  }
  .download {
    color: #1890ff;
  }
}
</style>
